<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Steps from "./Steps.svelte";
    import { fn } from "storybook/test";
    import Icon from "@iconify/svelte";
    import { Button } from "../Button";

    const { Story } = defineMeta({
        title: "Components/Navigation/Steps",
        component: Steps,
        tags: ["autodocs"],
        argTypes: {
            current: {
                description: "双向绑定属性",
            },
        },
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Steps
            current={0}
            data={[
                { title: "First", description: "This is a description." },
                { title: "Second", description: "This is a description." },
                { title: "Third", description: "This is a description." },
            ]}
        ></Steps>
    {/snippet}
</Story>

<Story name="Size" args={{ size: "small" }}>
    {#snippet template(args)}
        <Steps
            current={0}
            {...args}
            data={[
                { title: "First", description: "This is a description." },
                { title: "Second", description: "This is a description." },
                { title: "Third", description: "This is a description." },
            ]}
        ></Steps>
    {/snippet}
</Story>

<Story name="Current" args={{ current: 0 }}>
    {#snippet template(args)}
        <Steps
            {...args}
            data={[
                { title: "First", description: "This is a description." },
                { title: "Second", description: "This is a description." },
                { title: "Third", description: "This is a description." },
            ]}
        ></Steps>
        <Button onclick={() => (args.current! -= 1)}>Prev</Button>
        <Button onclick={() => (args.current! += 1)}>Next</Button>
    {/snippet}
</Story>

<Story
    name="Color"
    args={{ finishedColor: "rgb(var(--cui-green-5))", finishedBackground: "rgb(var(--cui-green-2))", processColor: "rgb(var(--cui-pink-3))", processBackground: "rgb(var(--cui-pink-2))", current: 0 }}
>
    {#snippet template(args)}
        <Steps
            {...args}
            data={[
                { title: "First", description: "This is a description." },
                { title: "Second", description: "This is a description." },
                { title: "Third", description: "This is a description." },
            ]}
        ></Steps>
        <Button onclick={() => (args.current! -= 1)}>Prev</Button>
        <Button onclick={() => (args.current! += 1)}>Next</Button>
    {/snippet}
</Story>

<Story name="Vertical" args={{ dir: "v", current: 0 }}>
    {#snippet template(args)}
        <Steps
            {...args}
            data={[
                { title: "First", description: "This is a description." },
                { title: "Second", description: "This is a description." },
                { title: "Third", description: "This is a description." },
            ]}
        ></Steps>
        <Button onclick={() => (args.current! -= 1)}>Prev</Button>
        <Button onclick={() => (args.current! += 1)}>Next</Button>
    {/snippet}
</Story>

<Story name="Status" args={{ current: 1 }}>
    {#snippet template(args)}
        {#snippet wait()}
            <Icon icon="line-md:loading-loop" width={26} height={26} />
        {/snippet}
        {#snippet gear()}
            <Icon icon="uil:setting" width={26} height={26} />
        {/snippet}
        <Steps
            {...args}
            data={[
                { title: "已完成", status: "finished" },
                { title: "进行中", status: "process", icon: gear },
                { title: "错误", status: "error" },
                { title: "告警", status: "warning" },
                { title: "等待", status: "wait", icon: wait },
            ]}
        ></Steps>
        <Button onclick={() => (args.current! -= 1)}>Prev</Button>
        <Button onclick={() => (args.current! += 1)}>Next</Button>
    {/snippet}
</Story>
